渐变 过渡 倒影

渐变 过渡 倒影

哈哈,真是太有意思了，今天做了很多好动效果图

+

渐变效果

(1) 线性渐变 

1
background:-webkit-linear-gradient(purple,green,red);

1
2
background:-webkit-repeating-linear-gradient(top right,blue 60px,red 190px);
/*第一个值是渐变的起始位置，第二个值是渐变的结束位置*/

(2)径向渐变

1
background:-webkit-repeating-radial-gradient(blue 10%,green 15%);

1
background:-webkit-repeating-radial-gradient(blue 10%,green 15%);

过度效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>过度</title>
		<link rel="stylesheet" href="CSS/过度.css">
		<style>
			div{
				width:200px;
				height:200px;
				background:pink;
				/*过度的元素属性 
				width：
				height： 
				all:代表全部属性*/
				/*transition-property:width height;*/
				/*过度的总时间可以是秒，也可以是毫秒*/
				/*transition-duration:10s;*/
				/*过度的时候速度的一个曲线，可以设置先快后慢，逐渐变快，逐渐变慢，也可以设置自己的速度曲线*/
				/*transition-timing-function:cubic-bezier(0.91, 0.15, 0.14, 0.65);*/
				/*几秒后执行过度动画*/
				/*transition-delay:1s;*/
				/*综合写法*/
				transition:all 10s linear 1s;
				/*不同浏览器里面的写法*/
				/*-webkit-transition:;   谷歌
				-moz-transition:;        火狐
				-ms-transition:;         IE
				-o-transition:;          (欧朋)*/
			}
			div:hover{
				width:500px;
				height:300px;
			}
		</style>
	</head>
	<body>
		<div>鼠标放我身上，查看效果</div>
	</body>
</html>

倒影效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>渐变</title>
		<style>
			img{
				display:block;
				margin:200px auto;
				/*倒影:只能有一个方向：left/right/below/above*/
				-webkit-box-reflect:above 50px -webkit-linear-gradient(
					rgba(255,255,255,0),
					rgba(255,255,255,.5),
					rgba(255,255,255,1)
					);
				}
			h1{
				-webkit-box-reflect:below 40px -webkit-linear-gradient(
					rgba(255,255,255,0),
					rgba(255,255,255,.5),
					rgba(255,255,255,1)
					);
			}
			h2{
				/*文字阴影部分*/
				text-shadow:12px 2px 12px blue;
			}
			div{
				width:200px;
				height:200px;
				background:pink;
				border-bottom:5px solid #dedede;
				-moz-border-bottom-colors:red blue red;
				box-shadow:10px 5px 10px blue;
				/*border:-webkit-linear-gradient(lightgray 20%,black 80%, lightgray 20%);*/
			}
			#border{border:8px solid #000;
       -webkit-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -webkit-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -webkit-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
       -webkit-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
 }
		</style>
	</head>
	<body>
		<h1>我是H1fdsdsgfhgkjhowswwwqww</h1>
		<h2>nnnjngkgkgkhkhkhk</h2>
		<div></div>
		<div class="border"></div>
	</body>
</html>